<template>
	<view>
		<uni-grid class="memu" :column="3" :showBorder="false">
			<uni-grid-item>
				<view :class="['text', selectPage === 1 ? 'active' : '']" @click="selectIcon(1)">
					<!-- <image src="../../static/images/1308886.png" mode="aspectFit"></image> -->
					<Am-FontAwesome type="fas fa-th" size="120" :color="selectPage === 1 ? 'red' : 'gray'">
					</Am-FontAwesome>
					<text>每日金句</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view :class="['text', selectPage === 2 ? 'active' : '']" @click="selectIcon(2)">
					<!-- <image src="../../static/images/1308870.png" mode="aspectFit"></image> -->

					<Am-FontAwesome type="fas fa-file" size="120" :color="selectPage === 2 ? 'red' : 'gray'">
					</Am-FontAwesome>
					<text>电子资料</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view :class="['text', selectPage === 3 ? 'active' : '']" @click="selectIcon(3)">
					<!-- <image src="../../static/images/1308870.png" mode="aspectFit"></image> -->
					<Am-FontAwesome type="fas fa-history" size="120" :color="selectPage === 3 ? 'red' : 'gray'">
					</Am-FontAwesome>
					<text>历史今日</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-list>
			<uni-list-item v-for="(dc, i) in Dclist" clickable :key="i" @click="goDocUrl(dc)" :title="dc.DocTitle"
				:rightText="dc.DocDate"></uni-list-item>
		</uni-list>
		<view class="" v-if="selectPage === 3">
			<view>
				<uni-calendar :insert="true" :lunar="true" @change="selectDate"></uni-calendar>
			</view>
			<view class="">
				<br />
				历史上今天发生了：
			</view>
			<!-- <p v-for="(item,index) in HistoryTodayInfo"
				style="text-indent: 1rem; margin-bottom: 1rem; padding: 1rem;font-size: 1.2rem;">
				<i class="mark">{{index+1}}</i>{{item}}
			</p> -->
			<uni-card  isFull="true" v-for="(item,index) in HistoryTodayInfo" :key="index">
				{{item}}
			</uni-card>
			<!-- {{HistoryTodayInfo}} -->
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				Dclist: [],
				neiModelShow: false,
				neiTitle: '',
				neiContent: null,
				selectPage: 1,
				HistoryTodayInfo: []
			};
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '之江党支部-学习'
			})
		},
		activated() {
			this.selectIcon(1);
		},
		onLoad() {
			this.selectIcon(1);
		},
		computed: {
			...mapState(['token', 'userCode'])
		},
		methods: {
			...mapActions(['reLogin', 'getToken', 'hasLogin']),
			selectIcon(i) {
				this.Dclist = [];
				this.selectPage = i;
				switch (i) {
					case 1: //电子资料
						this.getDcList();
						this.break;
					case 2: //人员介绍
						this.getFileList();
						this.break;
					case 3:
						this.getHistoryDay(this.getTodayDate())
						// this.selectDate()
						break
					default:
						break;
				}
			},
			getDcList() {
				if (this.selectPage != 1) return false;
				uni.showLoading();
				let url = {
					url: '/api/GetGoldStcList'
				}
				let param = {
					userCode: this.userCode,
					token: this.token
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.Dclist = e.data.items;
					uni.hideLoading();
				}).catch(e => {
					uni.hideLoading();
					// console.log(e);
				})
			},
			getFileList() {
				if (this.selectPage != 2) return false;
				uni.showLoading();
				let url = {
					url: '/api/GetFileList'
				}
				let param = {
					userCode: this.userCode,
					token: this.token
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.Dclist = e.data.items;
					uni.hideLoading();
				}).catch(e => {
					uni.hideLoading();
					// console.log(e);
				})
			},
			goDocUrl(dc) {
				uni.navigateTo({
					url: `./DocDetail?type=${this.selectPage}&id=${dc.ID}`
				});
				// console.log(url);
			},
			selectDate(e) {
				// console.log(e.fulldate);
				this.getHistoryDay(e.fulldate)
			},
			getHistoryDay(date) {
				const searchDate = date
				uni.showLoading();
				let url = {
					url: '/api/HistoryTodayInfo'
				}
				let param = {
					userCode: this.userCode,
					token: this.token,
					searchDate
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.HistoryTodayInfo = e.data.Infos;
					uni.hideLoading();
				}).catch(e => {
					uni.hideLoading();
					// console.log(e);
				})
			},
			getTodayDate() {
				// 获取当前日期
				var date = new Date();

				// 获取当前月份
				var nowMonth = date.getMonth() + 1;

				// 获取当前是几号
				var strDate = date.getDate();

				// 添加分隔符“-”
				var seperator = "-";

				// 对月份进行处理，1-9月在前面添加一个“0”
				if (nowMonth >= 1 && nowMonth <= 9) {
					nowMonth = "0" + nowMonth;
				}

				// 对月份进行处理，1-9号在前面添加一个“0”
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}

				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				var nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;
				return nowDate
			}
		}
	};
</script>

<style scoped lang="scss">
	.memu {
		.active {
			image {
				background-color: rgba($color: #ff0000, $alpha: 0.5);
				border-radius: 20upx;
			}
		}

		.text {
			text-align: center;
			margin: auto;
			transform: rotateY(-50);

			image {
				width: 150upx;
				height: 150upx;
				padding: 10upx;
			}

			text {
				display: block;
				padding: 0;
				margin: 0;
				font-size: 30upx;
				font-family: $base-fontfamily;
			}

			// line-height: 100rpx;
		}
	}

	.neil-modal {
		.neil-modal__container {
			width: 300upx !important;
		}
	}

	.uni-list-item {
		font-size: 50upx;
	}

	.mark {
		font-size: 1.7rem;
		padding: 1rem;
	}
</style>
